<template>
    <div class="wrap my-follow">
        <div class="wrap-header">
            <div class="mb16">
                <el-button size="mini" @click="$router.push({name:'idolsList'})">编辑</el-button>
            </div>
            <div class="card">
                <div v-for="item in idolList" class="card-item">
                    <img
                        :src="baseURL+item.avatar">
                    <div class="clearfix">{{item.name}}</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import {baseURL} from "../../utils/axios";

    export default {
        name: "myFollow",
        data() {
            return {
                idolList: [],
                baseURL: baseURL
            }
        },
        methods: {
            getList() {
                this.$api.idol.idolList({
                    "pageNum": 1,
                    "pageSize": 100,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    this.idolList = [];
                    res.data.list.forEach(item => {
                        if (item.userIdolStatus) {
                            this.idolList.push(item);
                        }
                    })
                })
            },
        },
        mounted() {
            this.getList()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .my-follow {
        .el-card__body {
            padding: 4px;
            text-align: center;
        }
        .card {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            &-item {
                margin: 4px;
                border-radius: 4px;
                border: 1px solid #ebeef5;
                background-color: #fff;
                overflow: hidden;
                color: #303133;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                padding-left: 6px;
                padding-right: 6px;
                width: 18%;
                text-align: center;
            }
            img {
                height: 140px;
            }
        }
    }

</style>
